<template>
  <!-- 用户数据 -->
  <div class="users">
    <div class="tabs">
      <div v-for="item in tabs" :key="item.id" class="item" :class="activeTab == item.id ? 'active' : ''"
        @click="tabClick(item.id)">
        {{ item.name }}
      </div>
    </div>
    <div class="content" :style="{ transform: `translateX(${-activeTab * 100}%)` }">
      <div class="container">
        <User></User>
      </div>

      <div class="container">
        <Role></Role>
      </div>

      <div class="container">
        <Seat></Seat>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({});
let emit = defineEmits([""]);

import User from "./components/user";
import Role from "./components/role";
import Seat from "./components/seat";
const tabs = [
  {
    name: "用户管理",
    id: 0,
  },
  {
    name: "角色管理",
    id: 1,
  },
  {
    name: "席位配置",
    id: 2,
  },
];
const activeTab = ref(0);
const tabClick = (id) => {
  activeTab.value = id;
  console.log(activeTab.value);
  console.log("222");
};
onMounted(() => { });
</script>
<style scoped lang="scss">
$tabsh: 44px;

.users {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .tabs {
    width: 300px;
    display: flex;
    height: $tabsh;

    .item {
      margin-right: 1px;
      text-align: center;
      width: 148px;
      height: 100%;
      line-height: 44px;
      background: #6c6c6c;
      color: #fff;
      font-size: 14px;
    }

    .active {
      background: #2698c8;
    }
  }

  .content {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease;
    /* 添加过渡效果，并使用缓动函数 */
    height: calc(100% - $tabsh);
    // overflow: hidden;
    box-sizing: border-box;

    // padding-top: 10px;
    .container {
      flex-shrink: 0;
      width: 100%;
      height: 100%;

      overflow: hidden;
    }
  }
}
</style>
